<template>
	<div class="lifeing">
		<ul>
			<li v-for="item in lifearr">
				<div class="imgbox"><img :src="item.src"></div>
				<p>{{item.text}}</p>
				<h5>{{item.adress}}</h5>
			</li>
		</ul>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.lifeing{
		background: #F2F2F2;
		margin-top: 40px;
		ul li{
			background: #fff;
			padding: 0 0 10px;
			margin-bottom:10px;
			text-align: left;
			.imgbox{
				height: 260px;
				width:100%;
				padding-top: 2px;
				img{
					width:100%;
					height: 260px;
				}
			}
			p{
				font-size: 13px;
				margin:8px 0;
				color: #5C5C5C;
				padding:0 6px;
			}
			h5{
				font-size: 11px;
				margin: 8px 0;
				color: #5C5C5C;
				padding:0 6px;
			}
		}
	}
</style>

<script type="text/javascript">
	
	export default{
		data(){
			return{
				lifearr:[]			
			}
		},
		components:{
			
		},
		methods:{
			getData(){
				var _this=this;
				_this.$http.get('../../static/data/life.json').then(function(res){
					_this.lifearr=res.data.life;
				}).catch(function(err){
					console.log(err)
				})
			}
		},
		mounted(){
			this.getData();
		}
	}
</script>